<template>
  <div class="login-container">
  <el-card class="login-card">
    <logo/>
      <el-form ref="loginForm" :model="loginData" :rules="loginRule" class="login-form">
        <h3 class="login-title">欢迎登录</h3>
        <el-form-item prop="username">
          <el-input v-model="loginData.username" placeholder="请输入用户名" size="large" type="text">
            <i slot="prepend" class="el-icon-user"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginData.password" placeholder="请输入密码" size="large" type="password">
            <i slot="prepend" class="el-icon-lock"></i>
          </el-input>
        </el-form-item>
        <el-form-item v-if="logon_mode=='web'" prop="verifyCode">
          <el-input v-model="loginData.verifyCode" placeholder="验证码" size="large" type="text">
            <el-button slot="append" :style="{backgroundImage: 'url('+ verifyCodeUrl +')'}"
                       class="verify-image" @click="changedVerifyCodeUrl"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item v-if="logon_mode=='web'" prop="remember">
          <el-checkbox-group v-model="loginData.remember">
            <el-checkbox label="记住我" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button size="large" @click="submitForm('loginForm')" @keyup.enter="submitForm('loginForm')">登录</el-button>
          <el-button v-if="true" native-type="reset" size="large">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script scope>
import logo from '@/views/layout/logo'

export default {
  name: 'login',
  components: {logo},
  props: {
    logon_mode: {
      default() {
        return process.env.VUE_APP_SECURITY_LOGON_MODE || 'oauth'
      }
    },//'web'|'oauth'
  },
  data() {
    return {
      verifyCodeUrl: '',
      loginData: {
        username: 'admin',
        password: '111111',
        verifyCode: '',
        remember: false
      },
      loginRule: {
        account: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
        verifyCode: [{required: true, message: '请输入验证码', trigger: 'blur'}],
      },
    };
  },
  created() {
    this.changedVerifyCodeUrl();
  },

  methods: {
    changedVerifyCodeUrl() {
      this.verifyCodeUrl = this.$security.oauth.verifyImg();
    },
    async submitForm(loginForm) {
      let validFlag = false;
      this.$refs[loginForm].validate(valid => validFlag = valid)
      if (validFlag) {
        let loginParam = this.$utils.lodash.clone(this.loginData, true)
        if (loginParam.password && loginParam.password.length > 0) {
          loginParam.password = this.$utils.cryptojs.MD5(loginParam.password).toString();
        } else {
          delete loginParam.password
        }
        await this.$security.oauth.loginAuth(loginParam).then(response => {
          if (response.bool) {
            let redirect = this.$route.query.redirect
            console.log(process.env)
            this.$router.push(redirect ? redirect : process.env.VUE_APP_PRODUCT_INDEX || '/')
          }
        }).catch(error => {
          if (this.logon_mode == 'web') {
            this.changedVerifyCodeUrl()
          }
        })
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$backColor: #2d3a4b;
$backColor: linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 50.71%),
linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 50.71%),
linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 50.71%);

.login-container {
  background: $backColor;
  display: flex;
  align-items: center;
  height: 100vh;

  .login-form {
    .el-input {
      font-size: 16px;

      i {
        font-size: 20px;
      }
    }

    .verify-image {
      width: 120px;
      height: 34px;
    }
  }

  .login-card {
    text-align: center;
    margin: 0 auto;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .4);
  }


}
</style>
